<template>
  <div class="container" style="padding: 18px">
    <div style="padding-bottom: 18px">
      <span style="width: 50px; display: inline-block; margin-left: 5px"
        >标段：
      </span>
      <el-select
        v-model="select.lotIndex"
        placeholder="请选择"
        style="width: 120px"
      >
        <el-option
          v-for="(item, index) in select.lotList"
          :key="index"
          :value="index"
          :label="item.LNAME"
        >
        </el-option>
      </el-select>
      <span style="width: 80px; display: inline-block; margin-left: 20px"
        >作业类型：
      </span>
      <el-select
        v-model="select.workType"
        placeholder="请选择"
        style="width: 120px"
      >
        <el-option
          v-for="item in select.workTypeList"
          :key="item.WORKTYPE"
          :value="item.WORKTYPE"
          :label="item.WORKTYPE"
        >
        </el-option>
      </el-select>
      <span style="width: 80px; display: inline-block; margin-left: 20px"
        >路线名称：
      </span>
      <el-input
        v-model="select.name"
        placeholder="请输入路线名称"
        style="width: 120px"
      ></el-input>
      <!-- <span style="width: 80px; display: inline-block; margin-left: 20px"
        >规划状态：
      </span>
      <el-select
        v-model="select.stateInfo"
        placeholder="请选择"
        style="width: 100px"
      >
        <el-option
          v-for="item in select.stateList"
          :key="item.WORKTYPE"
          :value="item.WORKTYPE"
          :label="item.WORKTYPE"
        >
        </el-option>
      </el-select> -->
      <el-button
        size="mini"
        type="primary"
        @click="getlistdata"
        style="margin-left: 15px"
        >查 询</el-button
      >
      <span style="width: 100px; display: inline-block; margin-left: 40px"
        >路线总数：{{ info.lineAll }}
      </span>
      <span style="width: 120px; display: inline-block"
        >已规划路线数：{{ info.lineCount1 }}
      </span>
      <span style="width: 120px; display: inline-block"
        >未规划路线数：{{ info.lineCount0 }}
      </span>
      <!-- <el-descriptions :column="4" style="width: 600px; display: inline-block">
                <el-descriptions-item label="道路总数"
                  >xxxx</el-descriptions-item
                >
                <el-descriptions-item label="已规划道路数"
                  >xxxx</el-descriptions-item
                >
                <el-descriptions-item label="未规划道路数"
                  >xxxx</el-descriptions-item
                >
              </el-descriptions> -->
      <!-- <el-button
        size="mini"
        type="primary"
        @click="GetPlanRoadWorkNoFillInfoPB"
        style="margin-left: 15px"
        >找遗漏</el-button
      > -->
    </div>
    <!-- <div class="monitoring">
      <el-form ref="select" :model="select" label-width="80px">
        <el-form-item label="标段" style="width: 200px; display: inline-block">
          <el-select v-model="select.lotInfo.LID" placeholder="请选择标段">
            <el-option
              v-for="(item, index) in select.lotList"
              :value="item.LID"
              :label="item.LNAME"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item
          label="作业类型"
          style="width: 200px; margin-left: 40px; display: inline-block"
        >
          <el-select v-model="select.workType" placeholder="请选择作业类型">
            <el-option
              v-for="(item, index) in select.workTypeList"
              :value="item.WORKTYPE"
              :label="item.WORKTYPE"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="路线名称：" style="display: inline-block">
          <el-input
            v-model="select.name"
            placeholder="请输入路线名称"
            style="width: 150px"
          ></el-input>
        </el-form-item>
        <el-form-item style="display: inline-block">
          <el-button size="mini" type="primary" @click="screeningData"
            >查 询</el-button
          >
        </el-form-item>
      </el-form>
    </div> -->
    <el-table
      v-loading="loading"
      border
      highlight-current-row
      :data="tableData"
    >
      <el-table-column
        prop="LINENAME"
        label="路线名称"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="SNAME"
        label="班次"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="WORKTYPE"
        label="作业类型"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="PARENT_NAME"
        label="所属组织机构"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="ISPLAN"
        label="规划状态"
        align="center"
        :formatter="formatterDesignState"
      ></el-table-column>
      <el-table-column
        prop="LINELENGTH"
        label="路线总长"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="PLANLINELENGTH"
        label="已规划长度"
        align="center"
      ></el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <!-- <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >定位</el-button
          > -->
          <el-button type="text" @click="handleEdit(scope.$index, scope.row)"
            >规划</el-button
          >
          <el-button
            type="text"
            @click="handleDelete(scope.$index, scope.row)"
            style="color: red"
            >删除规划</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <!-- <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination> -->
    </div>
  </div>
</template>
<script>
import '@/assets/css/common.css'
import eventBus from '@/eventBus.js'

// import { filter } from 'vue/types/umd'
export default {
  data () {

    return {
      loading: false,
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      originalData: [],
      tableData: [],
      info: {
        lineAll: '',
        lineCount0: 0,
        lineCount1: 0,
      },
      formSearch: null,
      
      select: {
        name: '',
        lotInfo: '',
        lotIndex: 0,
        lotClientNo: '',
        workType: '',
        lotList: [],
        workTypeList: [],
        // 未规划，已规划，规划中，上次规划
        // stateInfo: '全部',
        // stateList:[{"WORKTYPE":"全部"},{"WORKTYPE":"未规划"},{"WORKTYPE":"已规划"},{"WORKTYPE":"规划中"},{"WORKTYPE":"上次规划"}]
      },
    }
  },
  // created () {
    
  // },
  // beforeRouteEnter (to, from, next) {
  //   if (from.name === "ExamineCRDetailFinished") {
  //     next((vm) => {
  //       vm.form = from.params.info
  //       vm.getStartTimeList();
  //       vm.getEndTimeList();
  //       vm.getMeetingTimeInfo();
  //       vm.getMeetingRoomList();
  //     })
  //   }
  //   else {
  //     next()
  //   }
  // },
  mounted () {
    // eventBus.$on("showTableData", (val) => {
    //   if (val) {
    //     this.formSearch = val
    //     this.select.name = val.name
    //     this.select.lotIndex = val.lotIndex
    //     this.select.workType = val.workType
    //   }
    // });
    eventBus.$on("roadLine_reTableData", (val) => {
      this.getlistdata()
    });
    this.getWorkTypeInfo()
  },
  methods: {
    //获取工地列表
    async getlistdata () {
      // eventBus.$emit('hideTableData', {
      //   name: this.select.name,
      //   lotIndex: this.select.lotIndex,
      //   workType: this.select.workType,
      // })
      this.loading = true
      this.currentPage = 1;
      this.info.lineCount0 = 0
      this.info.lineCount1 = 0
      // var url = 'Vehicle/GetLineInfoPB?LINENAME=&WORKTYPE=洗扫&ClientNO=0000009'
      var url = 'Vehicle/GetLineInfoDesign?LINENAME=' + this.select.name + '&WORKTYPE=' + this.select.workType + '&ClientNO=' + this.select.lotList[this.select.lotIndex].CLIENT_NO
      const { data } = await this.$Http.get(url)
      data.forEach(element => {
        element.LINELENGTH = parseFloat(element.LINELENGTH).toFixed(2)
        element.PLANLINELENGTH = parseFloat(element.PLANLINELENGTH).toFixed(2)
        if (element.ISPLAN === '0') {
          this.info.lineCount0++;
          element.PLANLINELENGTH = '0'
        }
        if (element.ISPLAN === '1') {
          this.info.lineCount1++;
        }
      });
      this.info.lineAll = data.length
      this.tableData = data;
      this.loading = false
    },
    handleEdit (index, row) {
      eventBus.$emit('roadLine_handleEdit', row)
    },
    // 删除标段信息
    async handleDelete (index, row) {
      const confirmResult = await this.$confirm('是否确定删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult == 'confirm') {
        this.loading = true
        var url = 'Vehicle/DeleteLineDesignInfo?LID=' + row.LINEID
        const { data } = await this.$Http.get(url)
        if (data.IsSucess) {
          this.$message.success('删除成功')
          // 
          this.getlistdata()
        } else {
          this.$message.error('删除失败');
        }
      } else {
        this.$message.info('取消删除')
      }
    },
    // 双击表格某一行
    dblClickRow (row) {
      console.log(row)
    },
    async getWorkTypeInfo () {
      var url = 'Vehicle/GetWorkTypeInfoPB'
      const { data } = await this.$Http.get(url)
      this.select.workTypeList = data
      if (this.formSearch) {
        this.select.workType = this.formSearch.workType
      } else {
        this.select.workType = data[0].WORKTYPE
      }
      this.getLotInfo();
    },
    // 获取组织机构名
    async getLotInfo () {
      var url = 'Vehicle/GetLotInfoPB?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.select.lotList = data
      if (this.formSearch) {
        this.select.lotIndex = this.formSearch.lotIndex
      }
      this.getlistdata();
    },
    formatterDesignState (val) {
      // 0未规划，1已规划，2规划中，3上次规划
      switch (val.ISPLAN) {
        case '0':
          return '未规划'
        case '1':
          return '已规划'
        case '2':
          return '规划中'
        case '3':
          return '上次规划'
        default:
          return ''
      }
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getlistdata();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    },

  }
}
</script>
<style>
.container {
  overflow-y: auto;
  height: calc(100% - 50px);
  border: 0px;
}
.el-col-6 {
  min-width: 400px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>